<div class="wrapper-bz-page">
    <div class="wrapper-bz-body" >
        <table id="table_menu_in_m30" style="width:100%;height:100%"></table>
    </div>
</div>
<div id="dialog_edit_menu_in_m30"></div>
<script>
    $(function(){
        var subject = "menu_in_m30";
        //列表-对话框-表单
        var tableId = '#table_' + subject;
        var tableObject = $(tableId);
        var editDialogId = '#dialog_edit_' + subject;
        var editFormId = '#form_edit_' + subject;
        var paramDataEdit = {};

        var configDialogEdit = {
            href:'menu/edit',
            title:'修改菜单',
            queryParams:{},
            width:dialogDefaultWidth,
            height:dialogDefaultHeight,
            modal:true,
            buttons:[{
                text:'<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain:true,
                handler:function(){
                    paramDataEdit = $(editFormId).serializeObject();
                    console.log(paramDataEdit);
                    if(!paramDataEdit.menu_name_cn){
                        layer.msg("请填写菜单名称");
                        return ;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/menu/edit',
                        async: false,
                        dataType:'json',
                        type:'post',
                        data:paramDataEdit,
                        success:function(resp){
                            layer.close(loading);
                            if( 1 == resp.code ){
                                $(editDialogId).dialog('close');
                                tableObject.treegrid('reload');
                            }else{
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            },{
                text:'<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain:true,
                handler:function(){
                    $(editDialogId).dialog('close');
                }
            }]
        };

        var configDatagrid = {
            url:'/api/Menu/getMenuTreeList',
            method: 'post',
            remoteSort:false,
            pageList:[20,50,100],
            pageSize:20,
            pagination:false,
            clickToEdit:false,
            dblclickToEdit:true,
            singleSelect:true,
            rownumbers:false,
            striped:true,
            fitColumns:true,
            idField:'id',
            treeField:'menu_name_cn',
            fit:true,
            frozenColumns:[[
                {field:'ck',title:'ck',checkbox:true},
            ]],
            columns:[[
                {field:'id',title:'ID',width:40,hidden:true},
                {field:'menu_name_cn',title:'名称',width:200},
                {field:'menu_icon',title:'图标',width:150},
                {field:'sort',title:'排序',width:100},
                {field:'menu_level',title:'层级',width:100},
                {field:'status',title:'状态',width:100, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell cell-yes"></span>';
                        } else if (2 == value) {
                            return '<span class="cell cell-no"></span>';
                        }
                    }},
                {field:'create_time',title:'创建时间',width:100},
                {field:'update_time',title:'更新时间',width:100}
            ]],
            onCheck: function(index, row){
                var checkList = tableObject.datagrid('getChecked');
                if(checkList.length > 1){
                    $("#btn_edit_in_" + subject).linkbutton('disable');
                }else if(1 == checkList.length){
                    $("#btn_edit_in_" + subject).linkbutton('enable');
                }
            },
            onCheckAll: function(){
                var checkList = tableObject.datagrid('getChecked');
                if(checkList.length > 1){
                    $("#btn_edit_in_" + subject).linkbutton('disable');
                }else if(1 == checkList.length){
                    $("#btn_edit_in_" + subject).linkbutton('enable');
                }
            },
            onUncheck:function(index, row){
                var checkList = tableObject.datagrid('getChecked');
                if(checkList.length > 1){
                    $("#btn_edit_in_" + subject).linkbutton('disable');
                }else if(1 == checkList.length){
                    $("#btn_edit_in_" + subject).linkbutton('enable');
                }else{
                    $("#btn_edit_in_" + subject).linkbutton('disable');
                }
            },
            onUncheckAll:function(){
                $("#btn_edit_in_" + subject).linkbutton('disable');
            },
            loadFilter: function(data){
                return loadFilter(data, false);
            },
            onLoadSuccess:function(){
                $("#btn_edit_in_" + subject).linkbutton('disable');
            },
            toolbar:[
                {
                    text:'<i class="fa fa-refresh" style="color:limegreen"></i> 刷新',
                    plain:true,
                    handler:function(){
                        tableObject.treegrid('reload');
                    }
                },
                {
                    text:'<i class="fa fa-pencil" style="color:deepskyblue"></i> 编辑',
                    id:'btn_edit_in_' + subject,
                    plain:true,
                    handler:function(){
                        var checkList = getCheckedRowData("编辑");
                        if(!checkList){
                            return false;
                        }
                        configDialogEdit.queryParams = {id:checkList[0].id}
                        $(editDialogId).dialog(configDialogEdit);
                    }
                },
            ]
        };
        tableObject.treegrid(configDatagrid);

        function getCheckedRowData(opText){
            var checkList = tableObject.datagrid('getChecked');
            if(checkList.length < 1){
                layer.msg('请选择要'+ opText +'的数据');
                return false;
            }
            return checkList;
        }
    });
</script>
